<template>
  <div class="page-wrapper">
    <canvas class="canvas" ref="canvas"></canvas>
  </div>
</template>

<script>
// 半径
const R = 300;
// 圆心坐标
const X0 = 500;
const Y0 = 500;
// 分针刻度数
const MIN_SCALE_NUM = 60;
// 分针每个刻度的角度
const MIN_SCALE_DEG = (2 * Math.PI) / MIN_SCALE_NUM;
// 分针刻度的长度
const MIN_DISTANCE = 20;

// 小时刻度数
const HOUR_SCALE_NUM = 12;
// 小时每个刻度的角度
const HOUR_SCALE_DEG = (2 * Math.PI) / HOUR_SCALE_NUM;
// 小时刻度的长度
const HOUR_DISTANCE = 40;

export default {
  data() {
    return {
      ctx: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
      this.drawCircle();
      this.drawInnerCircle();
      this.drawMinScale();
      this.drawHourScale();
    });
  },
  methods: {
    init() {
      const canvas = this.$refs.canvas;
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      this.ctx = canvas.getContext("2d");
    },
    drawCircle() {
      this.ctx.beginPath();
      this.ctx.arc(X0, Y0, R, 0, 2 * Math.PI, false);
      this.ctx.lineWidth = 10;
      this.ctx.strokeStyle = "red";
      this.ctx.closePath();
      this.ctx.stroke();
    },
    drawInnerCircle() {
      this.ctx.beginPath();
      this.ctx.arc(X0, Y0, 10, 0, 2 * Math.PI, false);
      this.ctx.lineWidth = 5;
      this.ctx.strokeStyle = "red";
      this.ctx.closePath();
      this.ctx.stroke();
    },
    drawMinScale() {
      this.ctx.beginPath();
      this.ctx.lineCap = "round";
      for (let i = 0; i < MIN_SCALE_NUM; i++) {
        let startPoint = this.calcPoint(R - MIN_DISTANCE, MIN_SCALE_DEG * i);
        let endPoint = this.calcPoint(R, MIN_SCALE_DEG * i);

        // window.console.log("point======>", startPoint, endPoint);

        this.ctx.moveTo(...startPoint);
        this.ctx.lineTo(...endPoint);

        this.ctx.lineWidth = 5;
        this.ctx.strokeStyle = "red";
        // this.ctx.closePath();
      }
      this.ctx.stroke();
    },
    drawHourScale() {
      this.ctx.beginPath();
      this.ctx.lineCap = "round";
      for (let i = 0; i < HOUR_SCALE_NUM; i++) {
        let startPoint = this.calcPoint(R - HOUR_DISTANCE, HOUR_SCALE_DEG * i);
        let endPoint = this.calcPoint(R, HOUR_SCALE_DEG * i);

        // window.console.log("point======>", startPoint, endPoint);

        this.ctx.moveTo(...startPoint);
        this.ctx.lineTo(...endPoint);

        this.ctx.lineWidth = 10;
        this.ctx.strokeStyle = "red";
        // this.ctx.closePath();
      }
      this.ctx.stroke();
    },
    // 计算在圆内的坐标点位置
    calcPoint(r, a) {
      let x1 = X0 + r * Math.cos(a);
      let y1 = Y0 + r * Math.sin(a);
      return [x1, y1];
    },
  },
};
</script>

<style>
.page-wrapper {
  height: calc(100vh - 80px);
  width: 100vw;
  box-sizing: border-box;
}
.canvas {
  height: 100%;
  width: 100%;
}
</style>
